import { createRouter, createWebHistory } from "vue-router";
import HomeView from "../views/HomeView.vue";
// import NProgress from 'nprogress';
// import "nprogress/nprogress.css";
import { ElMessageBox } from "element-plus";
import type { Action } from "element-plus";

import { useUserStore } from "@/stores/user";

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/",
      name: "home",
      component: HomeView,
      children: [
        {
          path: "/dashboard",
          name: "dashboard",
          meta: {
            title: "系统首页",
            noAuth: true,
          },
          component: () =>
            import(
              /* webpackChunkName: "dashboard" */ "../views/dashboard.vue"
            ),
        },
        {
          path: "/blogs",
          name: "blogs",
          meta: {
            title: "博客浏览",
          },
          component: () =>
            import(/* webpackChunkName: "blogs" */ "../views/pages/blogs.vue"),
        },
        {
          path: "/blog",
          name: "blog",
          meta: {
            title: "博客",
          },
          component: () => import("../views/pages/blog.vue"),
        },
        {
          path: "/add-blog",
          name: "addBlog",
          meta: {
            title: "新增博客",
          },
          component: () => import("../views/pages/blogAdd.vue"),
        },
        {
          path: "/ideas",
          name: "ideas",
          meta: {
            title: "头脑风暴",
          },
          component: () => import("../views/pages/ideas.vue"),
        },
        {
          path: "/idea",
          name: "idea",
          meta: {
            title: "头脑风暴浏览",
          },
          component: () => import("../views/pages/idea.vue"),
        },
        {
          path: "/add-idea",
          name: "addIdea",
          meta: {
            title: "新增头脑风暴",
          },
          component: () => import("../views/pages/ideaAdd.vue"),
        },
        {
          path: "/ucenter",
          name: "ucenter",
          meta: {
            title: "用户中心",
          },
          component: () => import("../views/pages/ucenter.vue"),
        },
        {
          path: "/author/:id",
          name: "author",
          meta: {
            title: "创作者页面",
          },
          component: () => import("../views/pages/author.vue"),
        },
        {
          path: "/theme",
          name: "theme",
          meta: {
            title: "主题设置",
            permiss: "7",
          },
          component: () =>
            import(/* webpackChunkName: "theme" */ "../views/pages/theme.vue"),
        },
        {
          path: "/calendar",
          name: "calendar",
          meta: {
            title: "日历",
            permiss: "24",
          },
          component: () =>
            import(
              /* webpackChunkName: "calendar" */ "../views/element/calendar.vue"
            ),
        },
        {
          path: "/watermark",
          name: "watermark",
          meta: {
            title: "水印",
            permiss: "25",
          },
          component: () =>
            import(
              /* webpackChunkName: "watermark" */ "../views/element/watermark.vue"
            ),
        },
        {
          path: "/carousel",
          name: "carousel",
          meta: {
            title: "走马灯",
            permiss: "23",
          },
          component: () =>
            import(
              /* webpackChunkName: "carousel" */ "../views/element/carousel.vue"
            ),
        },
        {
          path: "/about",
          name: "about",
          // route level code-splitting
          // this generates a separate chunk (About.[hash].js) for this route
          // which is lazy-loaded when the route is visited.
          component: () => import("../views/pages/about.vue"),
        },
        {
          path: "/403",
          name: "403",
          meta: {
            title: "",
            noAuth: true,
          },
          component: () => import("../views/pages/403.vue"),
        },
        {
          path: "/404",
          name: "404",
          meta: {
            title: "",
            noAuth: true,
          },
          component: () => import("../views/pages/404.vue"),
        },
        {
          path: "/login",
          name: "login",
          meta: {
            title: "",
            noAuth: true,
          },
          component: () => import("../views/pages/login.vue"),
        },
        {
          path: "/register",
          name: "register",
          meta: {
            title: "",
            noAuth: true,
          },
          component: () => import("../views/pages/register.vue"),
        },
        {
          path: "/reset-pwd",
          name: "reset-pwd",
          meta: {
            title: "",
            noAuth: true,
          },
          component: () => import("../views/pages/reset-pwd.vue"),
        },
      ],
    },
    { path: "/:path(.*)", redirect: "/404" },
  ],
});

// router.beforeEach((to, from, next) => {
//   NProgress.start();
//   const role = localStorage.getItem('vuems_name');
//   const permiss = usePermissStore();

//   if (!role && to.meta.noAuth !== true) {
//       next('/login');
//   } else if (typeof to.meta.permiss == 'string' && !permiss.key.includes(to.meta.permiss)) {
//       // 如果没有权限，则进入403
//       next('/403');
//   } else {
//       next();
//   }
// });

// router.afterEach(() => {
//   NProgress.done();
// });

router.beforeEach((to, from, next) => {
  const userStore = useUserStore();
  if (!userStore.isLogin) {
    if (
      to.name === "idea" ||
      to.name === "ideas" ||
      to.name === "addBlog" ||
      to.name === "addIdea"
    ) {
      ElMessageBox.alert("请先登录", "", {
        // if you want to disable its autofocus
        autofocus: false,
        confirmButtonText: "OK",
        callback: () => {
          next({ name: "login" });
        },
      });
      return;
    }
  }

  next();
});

export default router;
